<template>
  <div class="tab-content single-ingot-class-report">
    <BasicCard style="margin-bottom: 20px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-bottom: 20px">
      <div class="chart-header">
        <BasicTitle :title="t('custom.参数分析')"></BasicTitle>
        <div class="filter">
          <div class="filter-item">
            时间
            <el-date-picker
              v-model="timeVals"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
              style="width: 240px"
            />
          </div>
          <div class="filter-item">
            参数设置
            <el-select v-model="canShuID" :placeholder="t('custom.请选择')" style="width: 140px">
              <el-option
                v-for="item in canShuList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
          <div class="filter-item">
            锭号
            <el-select
              v-model="dingHaoArr"
              multiple
              :multiple-limit="5"
              collapse-tags
              :placeholder="t('custom.请选择')"
              style="width: 140px"
            >
              <el-option v-for="item in dingHaoList" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div class="filter-item">
            <el-button type="primary" @click="getChartData">查询</el-button>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <SingleIngotClassReport_lineChart :data="qushiTuArr"></SingleIngotClassReport_lineChart>
      </div>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { shortcuts } from '../../utils'
  import { handleWindingIngotColumns } from '../../data'
  import { valueZhuaneFloat, splitTsIdToTime, formatDuration_group } from '@/utils'
  import SingleIngotClassReport_lineChart from './machineClassReport_lineChart.vue'
  import {
    getLuoTongDanDingShuJiFenXi,
    postLuoTongDanDingQuShiTuList,
    getZiDingYiBaoBiaos,
    getLuoTongCaiJiShuJuList
  } from '@/api/shengChanJianShi'
  import { getLuoTongZhiJiJiTaiTheGongYi } from '@/api/gongGongChaXun'

  const { t } = useI18n()
  const url = window.location.href
  const jitaiID = ref()
  const jitaiStr = ref()
  const baoBiaoID = ref()
  const banciIndex = ref(0)
  const machineTypeId = ref(0)
  const dingHaoList = ref<any>([])
  const canShuID = ref()
  const canShuList = ref<any>([])
  const dingHaoArr = ref<any>([])
  const qushiTuArr = ref<any>([])
  const ziDingYiList = ref<any>([])
  const ziDingYiDict = ref()
  const zongJiTaiList = ref<any>([])
  const caiJiList = ref<any>([])
  const timeVals = ref<any>([
    new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 3),
    new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)
  ])

  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.单锭数据'),
      isCustom: false,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `machine-class-report-table`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    // exportConfig: {
    //   filename: '数据表'
    // }
    loading: true,
    maxHeight: '500'
  })

  // 获取自定义报表列表
  const getCustomReport = () => {
    getZiDingYiBaoBiaos({
      craftNodeName: '络筒单锭数据分析',
      pageName: '络筒单锭数据分析详情'
    }).then((res) => {
      baoBiaoID.value = undefined
      ziDingYiList.value = res
      ziDingYiDict.value = ziDingYiList.value.find((val) => {
        return val.defaultDisplayFlag === true
      })
      if (ziDingYiDict.value !== undefined) {
        baoBiaoID.value = ziDingYiDict.value.id
      }
      handleInit()
    })
  }

  // 初始化设置
  const handleInit = () => {
    Promise.all([getMachineInfoByProcess()]).then(() => {
      getWindingCollectData()
      getIngotList()
    })
  }

  // 获取工序下机台
  const getMachineInfoByProcess = () => {
    getLuoTongZhiJiJiTaiTheGongYi('络筒').then((res: any) => {
      zongJiTaiList.value = res.sort((a, b) => {
        return a.machineName - b.machineName
      })
      machineTypeId.value = zongJiTaiList.value[0].machineTypeId
      if (url.indexOf('msszh') !== -1) {
        let arr = zongJiTaiList.value.filter((value) => {
          return value.machineName == '11'
        })
        jitaiID.value = arr[0].id
        jitaiStr.value = '11'
        // this.getLuoTongDanDingShuJiFenXi()
        return
      }
      jitaiID.value = zongJiTaiList.value[0].id
    })
  }

  // 获取采集单锭数据全集
  const getWindingCollectData = () => {
    getLuoTongCaiJiShuJuList(machineTypeId.value, 1).then((res: any) => {
      caiJiList.value = res.map((value) => {
        return {
          metaName: value.name,
          metaCode: value.code,
          isShowWeb: value.isShowWeb,
          magnificationUnit: value.magnificationUnit
        }
      })
    })
  }

  // 单锭数据list
  const getIngotList = () => {
    getLuoTongDanDingShuJiFenXi({
      TsIdStart: 25071602,
      TsIdEnd: 25071602,
      MachineDocumentId: jitaiID.value || '75fecdf6-977a-73d0-4780-3a07f8bb5b28',
      CustomReportId: baoBiaoID.value || ''
    }).then((res: any) => {
      gridOption.loading = false
      dingHaoList.value = []
      canShuList.value = res.machineHtLts[0].params
      canShuID.value = canShuList.value[0].code

      let arr: any = []
      res.machineHtLts[0].params.forEach((val) => {
        if (val.isShowWeb === true) {
          arr.push({
            title: val.name,
            field: val.code,
            minWidth: 70
          })
        }
      })
      gridOption.columns = handleWindingIngotColumns(arr)
      res.machineHtLts[0].data.sort((a, b) => {
        return a.SpindleNo - b.SpindleNo
      })
      dingHaoArr.value = [
        res.machineHtLts[0].data[0].SpindleNo,
        res.machineHtLts[0].data[1].SpindleNo,
        res.machineHtLts[0].data[2].SpindleNo,
        res.machineHtLts[0].data[3].SpindleNo,
        res.machineHtLts[0].data[4].SpindleNo
      ]
      res.machineHtLts[0].data.forEach((val) => {
        valueZhuaneFloat(val)
        dingHaoList.value.push(val.SpindleNo)
        val.machineSpindleNo = val.MachineName + '#' + val.SpindleNo
        val.banCi = splitTsIdToTime(val.TsId) + val.ShiftName
      })
      gridOption.data = res.machineHtLts[0].data
      getChartData()
    })
  }

  // 获取单锭趋势图数据
  const getChartData = () => {
    postLuoTongDanDingQuShiTuList({
      machineDocumentId: jitaiID.value,
      spindleNoList: dingHaoArr.value,
      startTsid: dayjs(timeVals.value[0]).format('YYYY-MM-DD').replace(/-/g, '').slice(2) + '01',
      endTsid: `${dayjs(timeVals.value[1]).format('YYYY-MM-DD').replace(/-/g, '').slice(2)}0${banciIndex.value}`,
      metaParamCode: canShuID.value
    }).then((res) => {
      let fenZuArr = formatDuration_group(res, 'SpindleNo')
      let item = canShuList.value.find((value) => {
        return value.code == canShuID.value
      })
      let xZhouArr = fenZuArr[0].list.map((val) => {
        return splitTsIdToTime(val.TsId, banciIndex.value)
      })
      qushiTuArr.value = fenZuArr.map((val) => {
        return {
          name: '锭号:' + val.SpindleNo,
          xZhouArr: xZhouArr,
          title: item.name,
          valueArr: val.list.map((val2) => {
            return Math.round(val2[canShuID.value] * 100) / 100
          })
        }
      })
    })
  }

  onMounted(() => {
    getCustomReport()
  })
</script>
<style scoped lang="scss">
  @import '@/views/shengChanJianShi/luoTongGongXu/winding_style.scss';
</style>
